import { Form, Input, Modal, Tree, message } from 'antd';
import { useEffect, useState } from 'react';
import { menuList, roleAddAPI } from '../../apis/administratorrole/index';
const Role = ({ open, setOpen, modalText, getlists, row, setRow }: any) => {
  const [form] = Form.useForm(); //表单
  // 权限列表
  const [list, setlist] = useState<any>([]);
  const [ids, setIds] = useState<any>([]);
  const getlist = async () => {
    if (modalText == '编辑角色') {
      console.log(row.id);

      const res = await menuList({ roleid: row.id });
      console.log(res, '权限列表2');
      setlist(res.data.list);
      res.data.list.forEach((item: any) => {
        item.children.forEach((i: any) => {
          if (i.checked === 1) {
            ids.push(i.id);
            // setIds(i.id);
          }
        });
      });
      console.log(ids);
      form.setFieldsValue({ name: row.name });
      setCheckedKeys(ids);
    } else {
      const res = await menuList({});
      console.log(res, '权限列表1');
      setlist(res.data.list);
      console.log(list, '1');
    }
  };

  //点击框
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
  const onCheck:any = (checkedKeysValue: React.Key[]) => {
    const ids = checkedKeysValue.map((item) => ({
      id: item,
    }));
    form.setFieldsValue({ menus: ids });
    setCheckedKeys(checkedKeysValue);
  };

  const onFinish = async (val: any) => {
    console.log(val);
    if (modalText == '编辑角色') {
      console.log(row);

      //修改
      const o = {
        id: row.id,
        name: val.name,
        menus: val.menus,
      };
      const res: any = await roleAddAPI(o);
      console.log(res, '添加');
      if (res.errCode === 10000) {
        message.success('修改成功');
        form.resetFields();
        setOpen(false);
        setCheckedKeys([]);
        form.setFieldsValue({ menus: [] });
        getlists();
      } else {
        message.error(res.errMsg);
        form.resetFields();
      }
    } else {
      //添加
      const res: any = await roleAddAPI(val);
      console.log(res, '添加');
      if (res.errCode === 10000) {
        message.success('添加成功');
        form.resetFields();
        form.setFieldsValue({ menus: [] });
        setCheckedKeys([]);
        setOpen(false);
        getlists();
      } else {
        message.error(res.errMsg);
        form.resetFields();
      }
    }
  };
  // 关闭
  const handleCancel = () => {
    setOpen(false);
    form.resetFields();
    setRow();
    setCheckedKeys([]);
    getlists();
    form.setFieldsValue({ menus: [] });
    setIds([]);
  };
  useEffect(() => {
    getlist();
  }, [row, modalText]);

  return (
    <Modal
      title={modalText}
      open={open}
      width="1000px"
      onOk={form.submit}
      onCancel={handleCancel}
    >
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="账号"
          name="name"
          rules={[{ required: true, message: '请输入用户账号!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label="角色" name="menus">
          <Tree
            checkable
            defaultExpandAll={true}
            onCheck={onCheck}
            checkedKeys={checkedKeys}
            treeData={list}
            fieldNames={{ title: 'name', key: 'id', children: 'children' }}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default Role;
